import React, { useEffect, useRef, useState } from "react";

import useStorePage from "@/store/useStorePage";
import Home from "./Home";

import PhotoView from "./PhotoView";
import { message } from "antd";

import axios from "axios";
// import useStoreFile from "@/store/useStoreFile";
const ipc = window.electron;
axios.defaults.baseURL = 'http://localhost:8012';
const Page = (props) => {
    const { config } = props;
    const { page, setPage } = useStorePage();
    const [data, setData] = useState([]);
    const timerRef = useRef(null);
    // const { photoObj, setPhotoObj } = useStoreFile();
    const route = {
        home: Home,
        PhotoView: PhotoView,

    };
    const Comp = route[page];

    const backHomePage = () => {
        // console.log('backHomePage');
        
        timerRef.current && clearTimeout(timerRef.current);
        timerRef.current = setTimeout(() => {
            setPage('home')
        }, config.backTime * 1000)
    }

    useEffect(() => {
        ipc.on('message', data => {
            message.error(data)
        })

        axios.get('/img').then(res => {
            setData(res.data.data)
        })
    }, []);
    return (
        <div
            style={{
                width: 1080,
                height: 1920,
                overflow: "hidden",
                position: "relative",
                zoom: window.innerWidth / 1080,
            }}
            onMouseDown={backHomePage}
            onTouchStart={backHomePage}
        >
            <Comp data={data} config={config}></Comp>
        </div>
    );
};
export default Page;
